<template>
  <!-- 侧边栏宽度 动态切换 -->
  <el-aside :width="isCollapse ? '60px' : '200px'" class="aside">
    <div class="aside-list">
      <!-- 菜单关闭和打开 -->
      <el-menu unique-opened class="el-menu-vertical-demo" :collapse="isCollapse"
  
      >
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false" v-show="isCollapse">|||</el-radio-button>
          <el-radio-button :value="true" v-show="!isCollapse">|||</el-radio-button>
        </el-radio-group>

        <!-- 遍历数据 -->
        <el-sub-menu :index='parentMenu.id.toString()' v-for="(parentMenu, parentMenuIndex) in asidelist" :key='parentMenu.id'>
          <!-- 菜单项 -->
          <template #title>
            <!-- 菜单图标 -->
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="parentMenu.icon"></use>
            </svg>
            <!-- 文本 -->
            <span>{{ parentMenu.title }}</span>
          </template>

          <!-- 子菜单项 -->
           <!-- 解决父子index相同时，点击子菜单，打开父菜单的问题 -->
          <el-menu-item :index="`${parentMenuIndex}-${childrenIndex}`" v-for="(childrenMenu, childrenIndex) in parentMenu.list"
            :key="childrenMenu.id" @click="selectMenuItem(childrenMenu.id)">{{ childrenMenu.name }}</el-menu-item>
        </el-sub-menu>

      </el-menu>

    </div>

  </el-aside>

</template>




<script setup lang="ts">
import { ref } from 'vue'
import { defineProps, defineEmits } from 'vue';

// 菜单是否打开
const isCollapse = ref(false)


// 定义要发射的事件  
const emit = defineEmits(['menu-selected']);

// 处理菜单项点击的方法  ,id是子菜单的id
function selectMenuItem(id: any) {
  // console.log("左侧带单选择" + id);
  emit('menu-selected', id);
}




// 模拟后台查询的数据： 定义左侧数据,动态加载第三方图标
let asidelist = ref([
  { id: 1, title: '音乐', icon: '#icon-a-Sheetmusic', list: [{ id: 1, name: '音乐下载' }, { id: 2, name: '音乐搜索' }] },
  { id: 2, title: '影视', icon: '#icon-yingshi', list: [{ id: 3, name: '影视下载' }, { id: 4, name: '影视搜索' }] },
  { id: 3, title: '书籍', icon: '#icon-shuji1', list: [{ id: 5, name: '小说' }, { id: 6, name: '漫画' }] },
  { id: 4, title: '图片', icon: '#icon-tupian', list: [{ id: 7, name: '图片1' }, { id: 8, name: '图片2' }] },
  { id: 5, title: '素材', icon: '#icon-sucaiku', list: [{ id: 9, name: '素材1' }, { id: 10, name: '素材2' }] },
  { id: 6, title: '学习平台', icon: '#icon-zaixianxuexi', list: [{ id: 11, name: '学习平台1' }, { id: 12, name: '学习平台2' }] },
  { id: 7, title: '导航网站', icon: '#icon-daohang', list: [{ id: 13, name: '小众技术资源库', }, { id: 14, name: '千叶导航' }] }
])



</script>



<style scoped></style>